<template>
  <div>
    <div :style="{ height: setting.options.height + 'px' }" :id="id"></div>
  </div>
</template>

<script>
  // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

  import { getGuid } from '@/utils/util'
  import { Line } from '@antv/g2plot'
  import { Getsqlcolumns } from '@/api/report/api'
  export default {
    name: 'G2Line',
    props: ['setting'],
    data() {
      return {
        id: getGuid(),
        line: undefined,
        tableData: [],
      }
    },
    watch: {
      'setting.options': {
        handler() {
          // 修改线条样式（是否为曲线）
          this.line.update({
            smooth: this.setting.options.smooth,
          })
        },
        deep: true,
      },
    },
    // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
    mounted() {
      var that = this
      Getsqlcolumns({
        DbId: that.setting.options.dbId,
        Sql: that.setting.options.sql,
        isdata: true,
      }).then((res) => {
        if (res.isSuccess) {
          this.line = new Line(this.id, {
            data: res.content.data,
            padding: 'auto',
            xField: that.setting.options.xField,
            yField: that.setting.options.yField,
            smooth: that.setting.options.smooth, // 是否为曲线
            autoFit: true,
            xAxis: {
              tickCount: 5,
            },
          })
          this.line.render()
        } else {
          fetch(
            'https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json'
          )
            .then((res) => res.json())
            .then((data) => {
              this.line = new Line(this.id, {
                data: data,
                padding: 'auto',
                xField: 'Date',
                yField: 'scales',
                autoFit: true,
                smooth: that.setting.options.smooth, // 是否为曲线
                xAxis: {
                  tickCount: 5,
                },
              })
              this.line.render()
            })
        }
      })
    },
  }
</script>
